<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 标题 -->
    <title>搜索页</title>
    <!-- 关键词 -->
    <meta name="keywords" content="" />
    <!-- 网站简介 -->
    <meta name="description" content="" />
    <!-- 自适应屏幕 -->
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
      <!--    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;"> -->
    <meta name="viewport" content="width=device-width,height=device-height, initial-scale=1,user-scalable=no;" />  
    <!-- IE兼容 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="css/mui.min.css">
    <!-- 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
    <header class="mui-bar mui-bar-nav">
        <!-- 顶部 -->
        <div class="top-nav clearfix search-nav">
            <div class="top-nav-left">
                <a href="" class="iconfont">&#xe64a;</a>
            </div>
            <div class="top-nav-center">
                <input type="text" placeholder="请输入商品关键字">  
            </div>
            <div class="top-nav-right">
                <a href="index.html" class="">取消</a>
            </div>
        </div>
            
        <ul class="filter-nav clearfix">
            <li><a href="javascript:;" class="filter-zonghe">综合</a></li>
            <li><a href="javascript:;" class="filter-sale">销量</a></li>
            <li><a href="javascript:;" class="filter-price">价格</a></li>
            <li id="mm-menu-toggle" class="filter-select">筛选<span class="iconfont">&#xe60d;</span></li>
        </ul>
    </header>

    <!--下拉刷新容器-->
    <div id="wrapper" class="mui-content mui-scroll-wrapper">
        <div class="mui-scroll">
            <ul class="search-goods-all">
                <!-- 每一款商品 -->
                <li class="goods-listt">
                    <a href="detail.html" class="search-goods-list clearfix">
                        <div class="cleft">
                            <img src="images/goods6.png" alt="">
                        </div>
                        <div class="cright">
                            <div class="search-like-name">
                                毛巾家纺纯棉吸水
                           </div>
                           <div class="search-like-send clearfix">
                                <div class="left">赠送9.9购物券</div>
                                <div class="right">捐1.9一券通</div>
                            </div> 
                            <div class="search-like-price">
                               29.9一券通  <s>￥59</s>       
                            </div>
                            
                            <div class="search-like-sale clearfix">
                                <div class="left">0条评论</div>
                                <div class="right">销量：492</div>
                            </div>
                        </div>
                    </a>
                </li>
                <!-- 每一款商品 -->
                <li class="goods-listt">
                    <a href="detail.html" class="search-goods-list clearfix">
                        <div class="cleft">
                            <img src="images/goods6.png" alt="">
                        </div>
                        <div class="cright">
                            <div class="search-like-name">
                                毛巾家纺纯棉吸水
                           </div>
                           <div class="search-like-send clearfix">
                                <div class="left">赠送9.9购物券</div>
                                <div class="right">捐1.9一券通</div>
                            </div> 
                            <div class="search-like-price">
                               29.9一券通  <s>￥59</s>       
                            </div>
                            
                            <div class="search-like-sale clearfix">
                                <div class="left">0条评论</div>
                                <div class="right">销量：492</div>
                            </div>
                        </div>
                    </a>
                </li>
                <!-- 每一款商品 -->
                <li class="goods-listt">
                    <a href="detail.html" class="search-goods-list clearfix">
                        <div class="cleft">
                            <img src="images/goods6.png" alt="">
                        </div>
                        <div class="cright">
                            <div class="search-like-name">
                                毛巾家纺纯棉吸水
                           </div>
                           <div class="search-like-send clearfix">
                                <div class="left">赠送9.9购物券</div>
                                <div class="right">捐1.9一券通</div>
                            </div> 
                            <div class="search-like-price">
                               29.9一券通  <s>￥59</s>       
                            </div>
                            
                            <div class="search-like-sale clearfix">
                                <div class="left">0条评论</div>
                                <div class="right">销量：492</div>
                            </div>
                        </div>
                    </a>
                </li>
                <!-- 每一款商品 -->
                <li class="goods-listt">
                    <a href="detail.html" class="search-goods-list clearfix">
                        <div class="cleft">
                            <img src="images/goods6.png" alt="">
                        </div>
                        <div class="cright">
                            <div class="search-like-name">
                                毛巾家纺纯棉吸水
                           </div>
                           <div class="search-like-send clearfix">
                                <div class="left">赠送9.9购物券</div>
                                <div class="right">捐1.9一券通</div>
                            </div> 
                            <div class="search-like-price">
                               29.9一券通  <s>￥59</s>       
                            </div>
                            
                            <div class="search-like-sale clearfix">
                                <div class="left">0条评论</div>
                                <div class="right">销量：492</div>
                            </div>
                        </div>
                    </a>
                </li>
                <!-- 每一款商品 -->
                <li class="goods-listt">
                    <a href="detail.html" class="search-goods-list clearfix">
                        <div class="cleft">
                            <img src="images/goods6.png" alt="">
                        </div>
                        <div class="cright">
                            <div class="search-like-name">
                                毛巾家纺纯棉吸水
                           </div>
                           <div class="search-like-send clearfix">
                                <div class="left">赠送9.9购物券</div>
                                <div class="right">捐1.9一券通</div>
                            </div> 
                            <div class="search-like-price">
                               29.9一券通  <s>￥59</s>       
                            </div>
                            
                            <div class="search-like-sale clearfix">
                                <div class="left">0条评论</div>
                                <div class="right">销量：492</div>
                            </div>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 筛选侧边栏 -->
    <nav id="mm-menu" class="mm-menu">
        <h4>商品筛选</h4>
        <div class="product-menu-top">
            <h5>价格区间</h5>
            <div class="zdy-select-price">
               <input type="number" placeholder="最低价"><span>-</span><input type="number" placeholder="最高价">
            </div>
            <ul class="clearfix">
                <li>1-30</li>
                <li>31-100</li>
                <li>100-500</li>
                <li>500以上</li>
            </ul>
        </div>
        <div class="product-menu-center">
            <h5>品牌</h5>
            <ul class="clearfix">
                <li>白色</li>
                <li>白色</li>
                <li>白色</li>
                <li>白色</li>
                <li>白色</li>
                <li>白色</li>
                <li>白色</li>
                <li>白色</li>
                <li>白色</li>
                <li>白色</li>
            </ul>
        </div>
        <div class="product-menu-bottom">
            <h5>类型</h5>
            <ul class="clearfix">
                <li>白色</li>
                <li>白色</li>
                <li>白色</li>
                <li>白色</li>
                <li>白色</li>
                <li>白色</li>
                <li>白色</li>
                <li>白色</li>
                <li>白色</li>
                <li>白色</li>
            </ul>
        </div>
        <div class="product-menu-btn clearfix">
            <input type="submit" class="chongzhi left" value="重置">
            <input type="submit" class="queding right" value="确定">
        </div>
    </nav>

    <!-- 返回顶部 -->
    <div class="actGotop iconfont">
        &#xe63c;
    </div>

    <!-- jQuery文件 -->
    <script src="js/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/tck.js"></script>
    <script src="js/mui.js"></script>
    <script>
         var menu = new Menu;
    </script>

    <!-- 综合点击筛选 -->
    <script>
        $(".filter-nav a").click(function(){
            $(".curr").removeClass("curr");
            $(this).addClass("curr");  
        })
        $(".filter-nav .filter-zonghe").click(function(){
            $(".filter-nav .filter-price").removeClass("down") ; 
            $(".filter-nav .filter-sale").removeClass("down"); 
            $(".filter-nav .filter-price").removeClass("up") ; 
            $(".filter-nav .filter-sale").removeClass("up");     
        })
    </script>

    <!-- 销量筛选点击 -->
    <script>
        var clickNumber =0;
        $('.filter-nav .filter-sale').click(function(){
            if(clickNumber %2==0){
                $(this).addClass("up"); 
                $(this).removeClass("down");
                $('.filter-nav .filter-price').removeClass("up");
                $('.filter-nav .filter-price').removeClass("down"); 
            }else{
                
                $(this).addClass("down"); 
                $(this).removeClass("up"); 
                $('.filter-nav .filter-price').removeClass("up");
                $('.filter-nav .filter-price').removeClass("down"); 
            }
            clickNumber ++;
        })
    </script>

    <!-- 价格筛选点击 -->
    <script>
        var clickNumber =0;
        $('.filter-nav .filter-price').click(function(){
            if(clickNumber %2==0){
                $(this).addClass("down"); 
                $(this).removeClass("up"); 
                $('.filter-nav .filter-sale').removeClass("up");
                $('.filter-nav .filter-sale').removeClass("down");
            }else{
                $(this).addClass("up"); 
                $(this).removeClass("down"); 
                $('.filter-nav .filter-sale').removeClass("up");
                $('.filter-nav .filter-sale').removeClass("down");  
            }
            clickNumber ++;
        })
    </script>

    <!-- 筛选规格选中 -->
    <script>
        $(".product-menu-top li").click(function(){
            $(".product-menu-top .active").removeClass("active");
            $(this).addClass("active");
           
        });
        $(".product-menu-bottom li").click(function(){
            $(".product-menu-bottom .active").removeClass("active");
            $(this).addClass("active");
        });
        $(".product-menu-center li").click(function(){
            $(".product-menu-center .active").removeClass("active");
            $(this).addClass("active");
        });
    </script>


    <!-- 返回顶部 -->
    <script>
        $(function(){ 
          $(window).scroll(function() {   
            if($(window).scrollTop() >= 50){
              $('.actGotop').fadeIn(300); 
            }else{    
              $('.actGotop').fadeOut(300);    
            }  
          });
          $('.actGotop').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); 
        });
    </script>
        
    <script>
        $(function(){
            mui('body').on('tap','a',function(){document.location.href=this.href;}); //解决a标签无法跳转
            var counter = 0;
            var num = 5;
            var pageStart = 0,pageEnd = 0;
            mui.init({
                pullRefresh: {
                    container: '#wrapper',

                    down: {
                        contentrefresh: '正在刷新...',
                        callback: pulldownRefresh
                    },
                    up: {
                        contentrefresh: '正在加载...',
                        callback: pullupRefresh
                    }
                }

            });
            /**
             * 下拉刷新具体业务实现
             */
            function pulldownRefresh() {
                setTimeout(function() {
                    var i ;
                    $.ajax({ 
                        type:"get", 
                        url:"json/product.json", 
                        dataType:"json",
                        async: true,　 
                        success:function(data){
                            var result = '';
                            var table = document.body.querySelector('.search-goods-all');
                            var cells = document.body.querySelectorAll('.goods-listt');
                            for(var i = 0; i < 5; i++) {
                                var li = document.createElement('li');
                                li.className = 'goods-listt';
                                li.innerHTML +=  '<a class="search-goods-list clearfix" href="'+data.lists[i].link+'">'
                                     +'<div class="cleft"><img src="'+data.lists[i].pic+'" alt=""> </div>'  // 图片
                                    +'<div class="cright">'
                                    +'<div class="search-like-name">'+data.lists[i].title+'</div>' //标题
                                    +'<div class="search-like-send clearfix"><div class="left">赠送'+data.lists[i].comment+'购物券</div><div class="right">捐'+data.lists[i].sale+'一券通</div></div>' //赠送
                                    +' <div class="search-like-price">'+data.lists[i].price+' <s>'+data.lists[i].discount+'</s> </div>' //折扣
                                    +'<div class="search-like-sale clearfix"><div class="left">'+data.lists[i].comment+'条评论</div><div class="right">销量：'+data.lists[i].sale+'</div></div>' //销量

                                    +'</div>'
                                +'</a>';
                                //下拉刷新，新纪录插到最前面；
                                table.insertBefore(li, table.firstChild);
                            }
                            // $('#wrapper .search-goods-all').append(result);  
                            mui('#wrapper').pullRefresh().endPulldownToRefresh(); //refresh completed
                        }
                    });      
           
                }, 1500);
            }
            // var count = 0;
            /**
             * 上拉加载具体业务实现
             */
            function pullupRefresh() {
                setTimeout(function() {
                    mui('#wrapper').pullRefresh().endPullupToRefresh(); 
                    var i ;
                    $.ajax({ 
                        type:"get", 
                        url:"json/product.json", 
                        dataType:"json",
                        async: true,　 
                        success:function(data){
                            counter++;
                            pageEnd = num * counter;
                            pageStart = pageEnd - num;
                            var result = '';
                            for(var i = pageStart; i < pageEnd; i++) {
                                result +="<li class='goods-listt'>";
                                result +=  '<a class="search-goods-list clearfix" href="'+data.lists[i].link+'">'
                                     +'<div class="cleft"><img src="'+data.lists[i].pic+'" alt=""> </div>'  // 图片
                                    +'<div class="cright">'
                                    +'<div class="search-like-name">'+data.lists[i].title+'</div>' //标题
                                    +'<div class="search-like-send clearfix"><div class="left">赠送'+data.lists[i].comment+'购物券</div><div class="right">捐'+data.lists[i].sale+'一券通</div></div>' //赠送
                                    +' <div class="search-like-price">'+data.lists[i].price+' <s>'+data.lists[i].discount+'</s> </div>' //折扣
                                    +'<div class="search-like-sale clearfix"><div class="left">'+data.lists[i].comment+'条评论</div><div class="right">销量：'+data.lists[i].sale+'</div></div>' //销量

                                    +'</div>'
                                +'</a>';
                                result +="</li>";
                            }
                            $('#wrapper .search-goods-all').append(result);  
                        }
                    });     
                }, 1500);
            }
        });
    </script>
</body>

</html>